<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件同步系统</title>
  <link rel="stylesheet" href="../static/css/login.css">
  <script src="../static/js/vue.js"></script>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div id="vueController">
    <div class="f17 f17v2">
      <div class="f17w1">
        <!-- <div class="f17w2" style="display:none;">
          <img src="" alt="">
        </div> -->
        <div class="cb41 cb41v0">
          <div class="cb41w1">
            <h1 style="text-align:center;">
              GOBANG SIGN IN
            </h1>
            <div>
              <span :class="model==1? 'color-text':'nor-text'" @click="pswClick()">密码登录</span>
              <span class="nor-text">|</span>
              <span :class="model==2? 'color-text':'nor-text'" @click="showUserLog=false;model=2;">邮箱登录</span>
            </div>
            <form v-if="showUserLog" action="" name="LoginForm">
              <ul style="list-style:none;padding:0;display: block;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;">
                <!-- 账号 -->
                <li>
                  <div class="cb41w2">
                    <label for="user_name" :class="{cb41focus:nameflag}">Username/用户名</label>
                    <input id="user_name" v-model="username" type="text" name="username" title="Please enter your username" maxlength="80" tabindex="1" @focus="diyFocus('name','focus')" @blur="diyFocus('name','blur')">
                    <span class="cb41w5">
                      <span class="cb41w6">
                        <span role="tooltip" class="cb41noteshoverbtn" tabindex="5" title="Username help" @click="showNameHelp">
                          <span class="name-help" style="display: none;">
                            <span class="cb41arrow" />
                            Username is usually your  studentID.
                            <!-- <a href="#" tabindex="6" target="_blank"> Forgot username? </a> -->
                          </span>
                          <span class="cb41btnhvr" />
                        </span>
                      </span>
                    </span>
                  </div>
                </li>
                <!-- 密码 -->
                <li>
                  <div class="cb41w3">
                    <label for="user_pwd" :class="{cb41focus:passwordflag}">Password/密码</label>
                    <input id="user_pwd" v-model="psw" type="password" name="password" title=" Please enter a password " value="" maxlength="255" tabindex="2" @focus="diyFocus('pwd','focus')" @blur="diyFocus('pwd','blur')">
                    <span class="cb41w5">
                      <span class="cb41w6">
                        <span role="tooltip" class="cb41noteshoverbtn" tabindex="7" title="Password help" @click="showPwdHelp">
                          <span class="pwd-help" style="display: none;">
                            <span class="cb41arrow" />
                            Password is your birthday.
                            <!-- <a href="#" tabindex="6" target="_blank"> Forgot password? </a> -->
                          </span>
                          <span class="cb41btnhvr" />
                        </span>
                      </span>
                    </span>
                  </div>
                </li>
              </ul>
              <!-- 校验 -->
              <div class="cb41w7">
                <span id="required" class="error-hide">
                  <div class="cb41error" style="color: red">
                    " Please enter your username and password "
                  </div>
                </span>
              </div>
              <!-- 忘记密码 -->
              <div class="reg-box">
                <span class="reg" @click="$router.push('/register')">立即注册</span>
                <span class="reg">|</span>
                <span class="reg">忘记密码</span>
              </div>
              <!-- 登录按钮 -->
              <div class="cb41w4">
                <span>
                  <input id="sign_button" type="button" value=" Sign in " class="sigh-in-button" tabindex="3" title=" Please click here to sign in " @click="doLogin()">
                </span>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    var test = new Vue({
      el: "#vueController",
      data: {
        nameflag: false,
        emailflag: false,
        passwordflag: false,
        showUserLog: true,
        model: 1,
        showCode: true,
        code: '',
        username: '',
        psw: ''
      },
      methods: {
        pswClick() {
        this.showUserLog = true
        this.model = 1
      },
        isNULL() {
          if (this.email != '') {
            this.emailflag = true
          }
          if (this.username != '') {
            this.nameflag = true
          }
          if (this.psw != '') {
            this.passwordflag = true
          }
          if (this.code == '') {
            this.codeflag = true
          }
        },
        diyFocus(content, type) {
          if (content == "name") {
            if (type == 'focus') {
              this.nameflag = true
            } else if (this.username != '') {
              this.nameflag = true
            } else {
              this.nameflag = false
            }
          } else if (content == "email") {
                if (type == 'focus') {
              this.emailflag = true
            } else if (this.email != '') {
              this.emailflag = true
            } else {
              this.emailflag = false
            }
            } else if (content == "code") {
                if (type == 'focus') {
              this.codeflag = true
            } else if (this.code != '') {
              this.codeflag = true
            } else {
              this.codeflag = true
            }
            } else {
            if (type == 'focus') {
              this.passwordflag = true
            } else if (this.psw != '') {
              this.passwordflag = true
            } else {
              this.passwordflag = false
            }
          }
        },
        async doLogin() {
          <!--用户登录-->
          if (this.username == '' || this.psw == '') {
            console.log('账号或密码为空')
            $('.error-hide').css({ 'display': 'block' })
          } else {
            // 模拟跳转
            // window.location.href="index.html"
            let param = {
              username: this.username,
              password: this.psw
            }
            $.ajax({
              url: "http://127.0.0.1:5000/login",
              type: 'post',
              dataType: 'json',
              data: param,
              success: function (data) {
                console.log(data.code);
                if(data.code!==200){
                  alert("用户名或密码错误")
                }else{
                  window.location.href = "index.html";
                }
              },
              error: function(error){
                console.log(error)
              }
            });
          }
        },

        showNameHelp() {
          $(".name-help").removeAttr("style");
          setTimeout(function() {
            $(".name-help").attr("style", "display:none");
          },2000)
        },
        showPwdHelp() {
          $(".pwd-help").removeAttr("style");
          setTimeout(function() {
            $(".pwd-help").attr("style", "display:none");
          },2000)
        }
      },
      mounted: function () {

      }
    })
  </script>

</body>
</html>
